<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--基于框架引入的css-->
		<link href="../../libs/css/mui.min.css" rel="stylesheet" />

		<!--自定义样式引入-->
		<link href="../../css/common.css" rel="stylesheet" />
		<link href=" ../../css/my.css" rel="stylesheet" />
		<style>
			.mui-backdrop {
				position: fixed;
				z-index: 0;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .3);
			}
			
			.tcc {
				width: calc(100% - 20%);
				height: 300px;
				position: fixed;
				top: 40%;
				left: 10%;
				right: 10%;
				text-align: center
			}
			.mui-icon-locate{bottom:0}
			.mui-ios .mui-table-view-cell{border-bottom: 1px solid #ccc;}
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</style>
	</head>

	<body>
		<div id="activeDateil"  v-cloak="">
			
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">活动详情</h1>
			<a class=" mui-icon mui-pull-right" @click="bm">立即报名</a>
		</header>
		<!--下拉刷新容器-->
		<div class="mui-content sign-up-page" style="border:none;padding:44px 0 20px 0">
			<!--数据列表-->
			<div class="my-info-content">
				<h3>{{activeTitle}}</h3>
				<form class="mui-input-group mui-disabled">
					<div class="mui-input-row">
						<label>主办:</label>
						<label>{{activeZb}}</label>
					</div>
				</form>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>活动时间:</label>
						<label>{{activeTime}}</label>
					</div>
				</form>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>活动地点:</label>
						<div class="mui-ellipsis">{{activeAddress}}<span class="mui-icon mui-icon-locate"></span></div>
					</div>
				</form>
				<div class="mui-input-group active-slider">
					<div id="slider" class="mui-slider">
						<div class="mui-clearfix">
							<label>活动日程:</label>
							<!--数据列表-->
							<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<span class=" icon-arrowleft"></span>
								<span class=" icon-arrowright"></span>
								<div class="box-flex">

									<div class="mui-control-item mui-active" href="#item1">
										9月8日
									</div>
									<div class="mui-control-item" href="#item2">
										9月8日
									</div>
								</div>
							</div>
						</div>

						<div id="popover" class="mui-popover tcc" style="height: 100px;">
							<div class="mui-popover-arrow"></div>
							<div style="text-align: center; margin-top: 10px;">选择报名方式</div>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell"  @click="person">
									<a href="#">机构报名</a>
								</li>
								<li class="mui-table-view-cell"  @click="jg">
									<a href="#">个人报名</a>
								</li>
							</ul>
						</div>

						<div id="item1" class="mui-slider-item mui-control-content mui-active" @click="schedlu()">
							<div class="box-flex" >
								<div class="">09：09~09：09</div>
								<div class="">开幕式</div>
								<div class=""><span class="mui-icon icon-checkbox"></span></div>
							</div>
							<div class="box-flex">
								<div class="">09：09~09：09</div>
								<div class="">开幕式</div>
								<div class=""><span class="mui-icon icon-checkbox"></span></div>
							</div>
						</div>
						<div id="item2" class="mui-slider-item mui-control-content">
							<div class="box-flex" >
								<div class="">09：09~09：09</div>
								<div class="">开幕式</div>
								<div class=""><span class="mui-icon icon-checkbox"></span></div>
							</div>
							<div class="box-flex">
								<div class="">09：09~09：09</div>
								<div class="">开幕式</div>
								<div class=""><span class="mui-icon icon-checkbox"></span></div>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>活动介绍:</label>
						<div class="mui-card-media">{{currentWebview.introZh}}
							<!--<img src="../../img/active/default@2x.png" style=" width:100%;   padding-top: 10px; display: block;" />-->
						</div>
					</div>
				</div>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>活动地指南:</label>
						<textarea disabled>{{activeGuide}}</textarea>
					</div>
				</form>
			</div>
			</div>
		</div>
		</div>
		<script src="../../libs/js/mui.min.js"></script>
		<script src="../../libs/js/jquery-3.2.1.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../libs/js/vue.min.js"></script>
		<script src="../../js/active/active_detail.js"></script>
	</body>

</html>